<template>
	<div class="FormList">
		<div v-for="(item, index) in Object.keys(form)" :key="index">
			<el-form-item :label="item" label-width="auto" label-position="left"
				v-if="Object.prototype.toString.call(form[item]) =='[object String]'">
				<el-input v-model="form[item]" placeholder="请输入字符串" />
			</el-form-item>
			<el-form-item :label="item" label-width="auto" label-position="left"
				v-if="Object.prototype.toString.call(form[item])=='[object Number]'">
				<el-input v-model.number="form[item]" placeholder="请输入数字" type="number" />
			</el-form-item>
			<!-- <el-form-item :label="item" label-width="auto" label-position="left"
				v-if="Object.prototype.toString.call(form[item])=='[object Object]' && (item=='create_time'||item=='update_time')">
				<el-date-picker v-model="form[item].$date" type="datetime" placeholder="选择日期时间">
				</el-date-picker>
			</el-form-item> -->
			<div v-if="Object.prototype.toString.call(form[item])=='[object Object]' && item=='notice_group_config'">
				<div style="font-weight: bold; margin-bottom: 10px;">{{item}}</div>
				<div class="FormItem">
						<formList :form="form[item]"></formList>
				</div>
			</div>
			<div v-if="Object.prototype.toString.call(form[item])=='[object Array]' &&form[item].length>0">
				<div style="font-weight: bold; margin-bottom: 10px;">{{item}}</div>
				<div class="FormItem">
					<div v-for="(item2, index) in form[item]" :key="index">
						<el-input v-model="form[item][index]"
							v-if="Object.prototype.toString.call(item2)=='[object String]'" placeholder="请输入" />
						<formList v-if="Object.prototype.toString.call(item2)=='[object Object]'" :form="item2">
						</formList>
					</div>
				</div>
			</div>
		</div>
		<div class="line" />
	</div>
</template>

<script>
	export default {
		name: 'formList',
		props: {
			form: Object
		},
		data() {
			return {}
		},
		created() {
			console.log("组建中",this.form)
			for (let i = 0; i < Object.keys(this.form).length; i++) {
				let str = Object.keys(this.form)[i]
				console.log("数据类型",str,this.form[str],Object.prototype.toString.call(this.form[str]))
			}
		},
		methods: {},
		watch: {
			"form": {
				handler(newVal, oldVal) {
					console.log(`新的值: ${newVal}`,newVal);
					console.log(`旧的值: ${oldVal}`,oldVal);
					//this.$emit("自定义的事件名称","要传递的参数")
					this.$emit("updateForm", this.form);
				},
				deep: true
			}
		}
	}
</script>

<style>
	.FormItem {
		padding: 10px;
		border: 1px solid #000;
		margin-bottom: 10px;
		border-radius: 10px;
	}

	.FormList {
		padding: 0 10px;
	}

	/* 横线 */
	.line {
		float: right;
		width: 100%;
		height: 1px;
		margin-top: -0.5em;
		background: #000000;
		position: relative;
		text-align: center;
		margin: 10px 0;
	}
</style>
